{% extends "index.html" %}
{% block title %}
    用户管理
{% endblock %}
{% block page_nav %}
	<li>用户</li>
	<li>用户管理</li>
{% endblock %}
{#页面内容#}
{% block content %}
    <!--查询条件-->
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="control-label col-md-1 col-md-offset-1" for="email">Email</label>
                            <div class="col-md-2">
                                <input id="email" class="form-control" type="text" name="email" placeholder="Email">
                            </div>
                            <label class="control-label col-md-1" for="company">公司</label>
                            <div class="col-md-2">
                                <input id="company" class="form-control" type="text" name="company" placeholder="公司">
                            </div>
                            <label class="control-label col-md-1" for="inputAuthority">权限</label>
                            <div class="col-md-2">
                                <label for="inputAuthority" class="sr-only">权限</label>
                                <select class="form-control" id="inputAuthority" name="authority">
                                    <option value="blank"></option>
                                    <option value="super_admin">超级管理员</option>
                                    <option value="com_admin">公司管理员</option>
                                    <option value="com_person">公司普通人员</option>
                                </select>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="row">
                                <div class="col-md-2 col-md-offset-4" >
                                    <button class="btn btn-primary icon-btn" type="button"><i class="fa fa-fw fa-lg fa-check-circle"></i>查询</button>
                                </div>
                                <div class="col-md-2 col-md-offset-1">
                                    <button class="btn btn-primary icon-btn" type="button"><i class="fa fa-fw fa-lg fa-refresh"></i>重置</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--查询结果显示表格-->
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover table-bordered" id="sampleTable">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Email</th>
                                    <th>公司</th>
                                    <th>公司地址</th>
                                    <th>联系人</th>
                                    <th>联系电话</th>
                                    <th>权限</th>
                                    <th>状态</th>
                                    <th>操作</th>

                                </tr>
                            </thead>
                            <tbody>
                                {% for id, user in users %}
                                    <tr>
                                        <td>{{ id+1 }}</td>
                                        <td>{{ user.email }}</td>
                                        <td>{{ user.company }}</td>
                                        <td>{{ user.company_address }}</td>
                                        <td>{{ user.linkman }}</td>
                                        <td>{{ user.phone_number }}</td>
                                        <td>{{ user.authority }}</td>
                                        <td>{{ user.status }}</td>
                                        <td>
                                            <a href="" target="_blank">查看</a>
                                            &nbsp&nbsp&nbsp&nbsp
                                            <a href="" target="_blank"
                                            data-toggle="modal" data-target="#myModal{{ id+1 }}">更新</a>
                                            &nbsp&nbsp&nbsp&nbsp
                                            <a href="" target="_blank">删除</a>
                                            <!-- 更新信息弹出页面 -->
                                            <div class="modal fade" id="myModal{{ id+1 }}" tabindex="-1" role="dialog"
                                                 aria-labelledby="myModalLabel">
                                                <div class="modal-dialog modal-lg" role="document">
                                                    <div class="modal-content">
                                                        <form class="form-horizontal" method="POST"
                                                                  action="{{ url_for('view.user_update') }}" id="form_update">
                                                            <div class="modal-header">
                                                                <button type="button" class="close" data-dismiss="modal"
                                                                        aria-label="Close"><span aria-hidden="true">&times;</span>
                                                                </button>
                                                                <h4 class="modal-title" id="myModalLabel">用户信息更新{{ user.email }}</h4>
                                                            </div>
                                                            <div class="modal-body">
                                                                <table class="table">
                                                                    <tbody>
                                                                    <tr>
                                                                        <td>
                                                                            <label class="control-label" for="email">Email</label>
                                                                        </td>
                                                                        <td>
                                                                            <input id="email" class="form-control" type="email" name="email" placeholder="Email" required value="{{ user.email }}">
                                                                        </td>
                                                                        <td>
                                                                            <label class="control-label" for="company">公司</label>
                                                                        </td>
                                                                        <td>
                                                                            <input id="company" class="form-control" type="text" name="company" placeholder="公司" required value="{{ user.company }}">
                                                                        </td>
                                                                        <td>
                                                                            <label class="control-label" for="authority">权限</label>
                                                                        </td>
                                                                        <td>
                                                                            <input id="authority" class="form-control" type="text" name="authority" placeholder="权限" required value="{{ user.authority }}">
                                                                        </td>
                                                                    </tr>
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <div class="col-md-2 col-md-offset-3">
                                                                    <button class="btn btn-primary icon-btn" type="submit" id="bt_update"><i
                                                                            class="fa fa-fw fa-lg fa-check-circle"></i>确定
                                                                    </button>
                                                                </div>
                                                                <div class="col-md-2 col-md-offset-1">
                                                                    <a class="btn btn-default" data-dismiss="modal">取消</a>
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
<!-- Javascripts-->
{% block script %}
	{{ super() }}
    {#    表格加载用js，以下4个js必须同时使用    #}
    <script type="text/javascript" src="{{ url_for('static', filename='js/jquery.dataTables.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/dataTables.bootstrap.min.js') }}"></script>
    <script type="text/javascript">
        // 表格插件初始化
        $('#sampleTable').DataTable({
            "language": {
                    "url": "{{ url_for('static', filename='js/dataTables/Chinese.json') }}"
        });
    </script>
{% endblock %}